<template>
     <div class="top">
        <Customizehead />
    </div>
        <div class="left">
            <el-menu
                            background-color=transparent
                            text-color="#000"
                            :default-active="$route.path"
                            router
                            >
                        <el-menu-item index="/Control" class="el-menu-item1" active-class="active"  >
                                控制台
                        </el-menu-item>
                        <!-- 轨迹回放 -->
                        <el-sub-menu index="2" class="el-menu-item4 ">
                            <template #title >
                                <div  class="title" active-class="active">终端管理</div>
                            </template>
                            <el-menu-item index="/vehicleInfo" style="inset:-6px auto auto 0px ;">
                                    车辆信息
                            </el-menu-item>
                            <el-menu-item index="/IcCard" style="inset:-6px auto auto 0px ;">
                                    IC卡记录
                            </el-menu-item>
                            <el-menu-item index="/terminalInfo" style="inset:-6px auto auto 0px ;">
                                    终端信息
                            </el-menu-item>
                            
                            <el-menu-item index="/videoCenter" style="inset:-6px auto auto 0px ;">
                                    视频提取
                            </el-menu-item>
                        </el-sub-menu>
                        <!-- 数据报表 -->
                       <el-sub-menu index="3" class="el-menu-item4 ">
                            <template #title >
                                <div  class="title" active-class="active">报警管理</div>
                            </template>
                            <el-menu-item index="/vehicle_0x64" style="inset:-6px auto auto 0px ;">
                                驾驶辅助报警
                            </el-menu-item>
                            <el-menu-item index="/vehicle_0x65" style="inset:-6px auto auto 0px ;">
                                驾驶员状态报警
                            </el-menu-item>
                            <el-menu-item index="/vehicle_0x66" style="inset:-6px auto auto 0px ;">
                                胎压监测报警
                            </el-menu-item>
                            <el-menu-item index="/vehicle_0x67" style="inset:-6px auto auto 0px ;">
                                盲区监测报警
                            </el-menu-item>
                            
                        </el-sub-menu>
                        
                         <!-- 轨迹回放 -->
                         <el-sub-menu index="4" class="el-menu-item4 ">
                            <template #title >
                                <div  class="title" active-class="active">数据报表</div>
                            </template>
                            <el-menu-item index="4-1" style="inset:-6px auto auto 0px ;">
                                    站点国标视频
                            </el-menu-item>
                            <el-menu-item index="4-2" style="inset:-6px auto auto 0px ;">
                                    站点国标视频
                            </el-menu-item>
                        </el-sub-menu>
                        <!-- 视频监控 -->
                        <el-sub-menu index="5" class="el-menu-item4 ">
                            <template #title >
                                <div  class="title" active-class="active">视频监控</div>
                            </template>
                            <el-menu-item index="5-1" style="inset:-6px auto auto 0px ;">
                                    站点国标视频
                            </el-menu-item>
                            <el-menu-item index="-2" style="inset:-6px auto auto 0px ;">
                                    站点国标视频
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
        </div>
        <!-- 右侧主内容区 -->
        <div class="right">
            <router-view class="view"></router-view>
        </div>
    
</template>

<script>
import Customizehead from "@/components/Customize-head"
export default {
  components: {Customizehead},
  name: 'HelloWorld',
  props: {
    
  },
  data: function () {
    return {
      map: '',
      marker: '',
      lng: "",
      lat: ""
    }
  },
  methods: {
  },
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.left{
    width: 10%;
    border-right: #ddd 1px solid;
    box-shadow: 0 0 1px #ddd;
    height:  94.7vh;
    
    float: left; 
    position: relative;
}

.right{
    left:10.1%;
    width: 88.8%;
  /* 
  height: 94.7vh;
  float: left; */
  position: absolute;
}
.el-menu-item.is-active {
    color:#00BAFF;
    background:linear-gradient(90deg,#a6def3 0%,#e8f5f8 100%) ;
}
:deep(.el-menu-item3){
    color:#00BAFF;
	background: linear-gradient(180deg,rgba(251,206,109,0) 0%,rgb(0, 186, 255, 0.54) 100%);
    border-bottom: 0px ; 
   
}
:deep(.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title ){
    color:#fff;
    border-bottom: 0px; 
   
}
.el-menu-item:hover{
    color:#00BAFF;
}


.el-menu{
    border: none;
    height: 50vh;
}
.el-menu .el-menu--vertical{
    height: 93vh;
}
.title{
    font-size: 18px;
}

.el-menu-item {
   color: #000;
   font-size: 18px;
   text-decoration: none;
  
}
.el-menu-item a:hover{
    color:#00BAFF;

}

</style>